<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>iconfont Demo</title>
  <link rel="shortcut icon" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg" type="image/x-icon"/>
  <link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01Z5paLz1O0zuCC7osS_!!6000000001644-55-tps-83-82.svg"/>
  <link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
  <link rel="stylesheet" href="demo.css">
  <link rel="stylesheet" href="iconfont.css">
  <script src="iconfont.js"></script>
  <!-- jQuery -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
  <!-- 代码高亮 -->
  <script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
  <style>
    .main .logo {
      margin-top: 0;
      height: auto;
    }

    .main .logo a {
      display: flex;
      align-items: center;
    }

    .main .logo .sub-title {
      margin-left: 0.5em;
      font-size: 22px;
      color: #fff;
      background: linear-gradient(-45deg, #3967FF, #B500FE);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  </style>
</head>
<body>
  <div class="main">
    <h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
      <img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
      
    </a></h1>
    <div class="nav-tabs">
      <ul id="tabs" class="dib-box">
        <li class="dib active"><span>Unicode</span></li>
        <li class="dib"><span>Font class</span></li>
        <li class="dib"><span>Symbol</span></li>
      </ul>
      
      <a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3213023" target="_blank" class="nav-more">查看项目</a>
      
    </div>
    <div class="tab-container">
      <div class="content unicode" style="display: block;">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
              <span class="icon iconfont">&#xe617;</span>
                <div class="name">病虫害</div>
                <div class="code-name">&amp;#xe617;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe61f;</span>
                <div class="name">筛选</div>
                <div class="code-name">&amp;#xe61f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7e4;</span>
                <div class="name">修改</div>
                <div class="code-name">&amp;#xe7e4;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe643;</span>
                <div class="name">减</div>
                <div class="code-name">&amp;#xe643;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe616;</span>
                <div class="name">xuanzhong_icon</div>
                <div class="code-name">&amp;#xe616;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe615;</span>
                <div class="name">xiangqing_icon</div>
                <div class="code-name">&amp;#xe615;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe614;</span>
                <div class="name">tianjia_icon</div>
                <div class="code-name">&amp;#xe614;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe613;</span>
                <div class="name">saoma_icon</div>
                <div class="code-name">&amp;#xe613;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7ce;</span>
                <div class="name">x</div>
                <div class="code-name">&amp;#xe7ce;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe681;</span>
                <div class="name">语音</div>
                <div class="code-name">&amp;#xe681;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe612;</span>
                <div class="name">yuyin_press_icon</div>
                <div class="code-name">&amp;#xe612;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe63a;</span>
                <div class="name">x</div>
                <div class="code-name">&amp;#xe63a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea82;</span>
                <div class="name">24gf-playCircle</div>
                <div class="code-name">&amp;#xea82;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe8ba;</span>
                <div class="name"> 定位2小</div>
                <div class="code-name">&amp;#xe8ba;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe62e;</span>
                <div class="name">时间</div>
                <div class="code-name">&amp;#xe62e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60d;</span>
                <div class="name">dingwei_icon</div>
                <div class="code-name">&amp;#xe60d;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60e;</span>
                <div class="name">zglb_icon</div>
                <div class="code-name">&amp;#xe60e;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60f;</span>
                <div class="name">fxwt_icon</div>
                <div class="code-name">&amp;#xe60f;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe610;</span>
                <div class="name">qdjl_icon</div>
                <div class="code-name">&amp;#xe610;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe611;</span>
                <div class="name">xcyb_icon</div>
                <div class="code-name">&amp;#xe611;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60b;</span>
                <div class="name">xingxing_press_icon</div>
                <div class="code-name">&amp;#xe60b;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe730;</span>
                <div class="name">圆形选中-fill</div>
                <div class="code-name">&amp;#xe730;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea97;</span>
                <div class="name">24gl-circle</div>
                <div class="code-name">&amp;#xea97;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe600;</span>
                <div class="name">微信</div>
                <div class="code-name">&amp;#xe600;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe609;</span>
                <div class="name">mima_icon</div>
                <div class="code-name">&amp;#xe609;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60a;</span>
                <div class="name">zhanghao_icon</div>
                <div class="code-name">&amp;#xe60a;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe608;</span>
                <div class="name">tianjia_icon</div>
                <div class="code-name">&amp;#xe608;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe60c;</span>
                <div class="name">搜索</div>
                <div class="code-name">&amp;#xe60c;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a5;</span>
                <div class="name">电池-高电量</div>
                <div class="code-name">&amp;#xe7a5;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a6;</span>
                <div class="name">电池-中电量</div>
                <div class="code-name">&amp;#xe7a6;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe7a7;</span>
                <div class="name">电池-低电量</div>
                <div class="code-name">&amp;#xe7a7;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe607;</span>
                <div class="name">打勾</div>
                <div class="code-name">&amp;#xe607;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe606;</span>
                <div class="name">home_c_icon</div>
                <div class="code-name">&amp;#xe606;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea99;</span>
                <div class="name">home_c_icon</div>
                <div class="code-name">&amp;#xea99;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xea98;</span>
                <div class="name">home_c_icon</div>
                <div class="code-name">&amp;#xea98;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe603;</span>
                <div class="name">password_icon</div>
                <div class="code-name">&amp;#xe603;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe604;</span>
                <div class="name">account_icon</div>
                <div class="code-name">&amp;#xe604;</div>
              </li>
          
            <li class="dib">
              <span class="icon iconfont">&#xe605;</span>
                <div class="name">home_c_icon</div>
                <div class="code-name">&amp;#xe605;</div>
              </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="unicode-">Unicode 引用</h2>
          <hr>

          <p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
          <ul>
            <li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
            <li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
          </ul>
          <blockquote>
            <p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
          </blockquote>
          <p>Unicode 使用步骤如下：</p>
          <h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
<pre><code class="language-css"
>@font-face {
  font-family: 'iconfont';
  src: url('iconfont.eot?t=1663148304850'); /* IE9 */
  src: url('iconfont.eot?t=1663148304850#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2'),
       url('iconfont.woff?t=1663148304850') format('woff'),
       url('iconfont.ttf?t=1663148304850') format('truetype'),
       url('iconfont.svg?t=1663148304850#iconfont') format('svg');
}
</code></pre>
          <h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
<pre><code class="language-css"
>.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
<pre>
<code class="language-html"
>&lt;span class="iconfont"&gt;&amp;#x33;&lt;/span&gt;
</code></pre>
          <blockquote>
            <p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
          </blockquote>
          </div>
      </div>
      <div class="content font-class">
        <ul class="icon_lists dib-box">
          
          <li class="dib">
            <span class="icon iconfont icon-bingchonghai"></span>
            <div class="name">
              病虫害
            </div>
            <div class="code-name">.icon-bingchonghai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shaixuan"></span>
            <div class="name">
              筛选
            </div>
            <div class="code-name">.icon-shaixuan
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiugai"></span>
            <div class="name">
              修改
            </div>
            <div class="code-name">.icon-xiugai
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jian"></span>
            <div class="name">
              减
            </div>
            <div class="code-name">.icon-jian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xuanzhong_icon"></span>
            <div class="name">
              xuanzhong_icon
            </div>
            <div class="code-name">.icon-xuanzhong_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xiangqing_icon"></span>
            <div class="name">
              xiangqing_icon
            </div>
            <div class="code-name">.icon-xiangqing_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_icon1"></span>
            <div class="name">
              tianjia_icon
            </div>
            <div class="code-name">.icon-tianjia_icon1
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-saoma_icon"></span>
            <div class="name">
              saoma_icon
            </div>
            <div class="code-name">.icon-saoma_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-close"></span>
            <div class="name">
              x
            </div>
            <div class="code-name">.icon-close
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin"></span>
            <div class="name">
              语音
            </div>
            <div class="code-name">.icon-yuyin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yuyin_press_icon"></span>
            <div class="name">
              yuyin_press_icon
            </div>
            <div class="code-name">.icon-yuyin_press_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-x"></span>
            <div class="name">
              x
            </div>
            <div class="code-name">.icon-x
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-24gf-playCircle"></span>
            <div class="name">
              24gf-playCircle
            </div>
            <div class="code-name">.icon-24gf-playCircle
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingweixiao"></span>
            <div class="name">
               定位2小
            </div>
            <div class="code-name">.icon-dingweixiao
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-shijian"></span>
            <div class="name">
              时间
            </div>
            <div class="code-name">.icon-shijian
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dingwei_icon"></span>
            <div class="name">
              dingwei_icon
            </div>
            <div class="code-name">.icon-dingwei_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zglb_icon"></span>
            <div class="name">
              zglb_icon
            </div>
            <div class="code-name">.icon-zglb_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-fxwt_icon"></span>
            <div class="name">
              fxwt_icon
            </div>
            <div class="code-name">.icon-fxwt_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-qdjl_icon"></span>
            <div class="name">
              qdjl_icon
            </div>
            <div class="code-name">.icon-qdjl_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xcyb_icon"></span>
            <div class="name">
              xcyb_icon
            </div>
            <div class="code-name">.icon-xcyb_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-xingxing_press_icon"></span>
            <div class="name">
              xingxing_press_icon
            </div>
            <div class="code-name">.icon-xingxing_press_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yun-fill"></span>
            <div class="name">
              圆形选中-fill
            </div>
            <div class="code-name">.icon-yun-fill
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-yun-stork"></span>
            <div class="name">
              24gl-circle
            </div>
            <div class="code-name">.icon-yun-stork
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-weixin"></span>
            <div class="name">
              微信
            </div>
            <div class="code-name">.icon-weixin
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-mima_icon"></span>
            <div class="name">
              mima_icon
            </div>
            <div class="code-name">.icon-mima_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-zhanghao_icon"></span>
            <div class="name">
              zhanghao_icon
            </div>
            <div class="code-name">.icon-zhanghao_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-tianjia_icon"></span>
            <div class="name">
              tianjia_icon
            </div>
            <div class="code-name">.icon-tianjia_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-sousuo"></span>
            <div class="name">
              搜索
            </div>
            <div class="code-name">.icon-sousuo
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianchi-gaodianliang"></span>
            <div class="name">
              电池-高电量
            </div>
            <div class="code-name">.icon-dianchi-gaodianliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianchi-zhongdianliang"></span>
            <div class="name">
              电池-中电量
            </div>
            <div class="code-name">.icon-dianchi-zhongdianliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dianchi-didianliang"></span>
            <div class="name">
              电池-低电量
            </div>
            <div class="code-name">.icon-dianchi-didianliang
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-dagou"></span>
            <div class="name">
              打勾
            </div>
            <div class="code-name">.icon-dagou
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jt-l"></span>
            <div class="name">
              home_c_icon
            </div>
            <div class="code-name">.icon-jt-l
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jt-t"></span>
            <div class="name">
              home_c_icon
            </div>
            <div class="code-name">.icon-jt-t
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jt-d"></span>
            <div class="name">
              home_c_icon
            </div>
            <div class="code-name">.icon-jt-d
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-password_icon"></span>
            <div class="name">
              password_icon
            </div>
            <div class="code-name">.icon-password_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-account_icon"></span>
            <div class="name">
              account_icon
            </div>
            <div class="code-name">.icon-account_icon
            </div>
          </li>
          
          <li class="dib">
            <span class="icon iconfont icon-jt-r"></span>
            <div class="name">
              home_c_icon
            </div>
            <div class="code-name">.icon-jt-r
            </div>
          </li>
          
        </ul>
        <div class="article markdown">
        <h2 id="font-class-">font-class 引用</h2>
        <hr>

        <p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
        <p>与 Unicode 使用方式相比，具有如下特点：</p>
        <ul>
          <li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
          <li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
<pre><code class="language-html">&lt;link rel="stylesheet" href="./iconfont.css"&gt;
</code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;span class="iconfont icon-xxx"&gt;&lt;/span&gt;
</code></pre>
        <blockquote>
          <p>"
            iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
        </blockquote>
      </div>
      </div>
      <div class="content symbol">
          <ul class="icon_lists dib-box">
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-bingchonghai"></use>
                </svg>
                <div class="name">病虫害</div>
                <div class="code-name">#icon-bingchonghai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shaixuan"></use>
                </svg>
                <div class="name">筛选</div>
                <div class="code-name">#icon-shaixuan</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiugai"></use>
                </svg>
                <div class="name">修改</div>
                <div class="code-name">#icon-xiugai</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jian"></use>
                </svg>
                <div class="name">减</div>
                <div class="code-name">#icon-jian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xuanzhong_icon"></use>
                </svg>
                <div class="name">xuanzhong_icon</div>
                <div class="code-name">#icon-xuanzhong_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xiangqing_icon"></use>
                </svg>
                <div class="name">xiangqing_icon</div>
                <div class="code-name">#icon-xiangqing_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_icon1"></use>
                </svg>
                <div class="name">tianjia_icon</div>
                <div class="code-name">#icon-tianjia_icon1</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-saoma_icon"></use>
                </svg>
                <div class="name">saoma_icon</div>
                <div class="code-name">#icon-saoma_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-close"></use>
                </svg>
                <div class="name">x</div>
                <div class="code-name">#icon-close</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin"></use>
                </svg>
                <div class="name">语音</div>
                <div class="code-name">#icon-yuyin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yuyin_press_icon"></use>
                </svg>
                <div class="name">yuyin_press_icon</div>
                <div class="code-name">#icon-yuyin_press_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-x"></use>
                </svg>
                <div class="name">x</div>
                <div class="code-name">#icon-x</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-24gf-playCircle"></use>
                </svg>
                <div class="name">24gf-playCircle</div>
                <div class="code-name">#icon-24gf-playCircle</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingweixiao"></use>
                </svg>
                <div class="name"> 定位2小</div>
                <div class="code-name">#icon-dingweixiao</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-shijian"></use>
                </svg>
                <div class="name">时间</div>
                <div class="code-name">#icon-shijian</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dingwei_icon"></use>
                </svg>
                <div class="name">dingwei_icon</div>
                <div class="code-name">#icon-dingwei_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zglb_icon"></use>
                </svg>
                <div class="name">zglb_icon</div>
                <div class="code-name">#icon-zglb_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-fxwt_icon"></use>
                </svg>
                <div class="name">fxwt_icon</div>
                <div class="code-name">#icon-fxwt_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-qdjl_icon"></use>
                </svg>
                <div class="name">qdjl_icon</div>
                <div class="code-name">#icon-qdjl_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xcyb_icon"></use>
                </svg>
                <div class="name">xcyb_icon</div>
                <div class="code-name">#icon-xcyb_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-xingxing_press_icon"></use>
                </svg>
                <div class="name">xingxing_press_icon</div>
                <div class="code-name">#icon-xingxing_press_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yun-fill"></use>
                </svg>
                <div class="name">圆形选中-fill</div>
                <div class="code-name">#icon-yun-fill</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-yun-stork"></use>
                </svg>
                <div class="name">24gl-circle</div>
                <div class="code-name">#icon-yun-stork</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-weixin"></use>
                </svg>
                <div class="name">微信</div>
                <div class="code-name">#icon-weixin</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-mima_icon"></use>
                </svg>
                <div class="name">mima_icon</div>
                <div class="code-name">#icon-mima_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-zhanghao_icon"></use>
                </svg>
                <div class="name">zhanghao_icon</div>
                <div class="code-name">#icon-zhanghao_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-tianjia_icon"></use>
                </svg>
                <div class="name">tianjia_icon</div>
                <div class="code-name">#icon-tianjia_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-sousuo"></use>
                </svg>
                <div class="name">搜索</div>
                <div class="code-name">#icon-sousuo</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianchi-gaodianliang"></use>
                </svg>
                <div class="name">电池-高电量</div>
                <div class="code-name">#icon-dianchi-gaodianliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianchi-zhongdianliang"></use>
                </svg>
                <div class="name">电池-中电量</div>
                <div class="code-name">#icon-dianchi-zhongdianliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dianchi-didianliang"></use>
                </svg>
                <div class="name">电池-低电量</div>
                <div class="code-name">#icon-dianchi-didianliang</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-dagou"></use>
                </svg>
                <div class="name">打勾</div>
                <div class="code-name">#icon-dagou</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jt-l"></use>
                </svg>
                <div class="name">home_c_icon</div>
                <div class="code-name">#icon-jt-l</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jt-t"></use>
                </svg>
                <div class="name">home_c_icon</div>
                <div class="code-name">#icon-jt-t</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jt-d"></use>
                </svg>
                <div class="name">home_c_icon</div>
                <div class="code-name">#icon-jt-d</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-password_icon"></use>
                </svg>
                <div class="name">password_icon</div>
                <div class="code-name">#icon-password_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-account_icon"></use>
                </svg>
                <div class="name">account_icon</div>
                <div class="code-name">#icon-account_icon</div>
            </li>
          
            <li class="dib">
                <svg class="icon svg-icon" aria-hidden="true">
                  <use xlink:href="#icon-jt-r"></use>
                </svg>
                <div class="name">home_c_icon</div>
                <div class="code-name">#icon-jt-r</div>
            </li>
          
          </ul>
          <div class="article markdown">
          <h2 id="symbol-">Symbol 引用</h2>
          <hr>

          <p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
            这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：</p>
          <ul>
            <li>支持多色图标了，不再受单色限制。</li>
            <li>通过一些技巧，支持像字体那样，通过 <code>font-size</code>, <code>color</code> 来调整样式。</li>
            <li>兼容性较差，支持 IE9+，及现代浏览器。</li>
            <li>浏览器渲染 SVG 的性能一般，还不如 png。</li>
          </ul>
          <p>使用步骤如下：</p>
          <h3 id="-symbol-">第一步：引入项目下面生成的 symbol 代码：</h3>
<pre><code class="language-html">&lt;script src="./iconfont.js"&gt;&lt;/script&gt;
</code></pre>
          <h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
<pre><code class="language-html">&lt;style&gt;
.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
&lt;/style&gt;
</code></pre>
          <h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
<pre><code class="language-html">&lt;svg class="icon" aria-hidden="true"&gt;
  &lt;use xlink:href="#icon-xxx"&gt;&lt;/use&gt;
&lt;/svg&gt;
</code></pre>
          </div>
      </div>

    </div>
  </div>
  <script>
  $(document).ready(function () {
      $('.tab-container .content:first').show()

      $('#tabs li').click(function (e) {
        var tabContent = $('.tab-container .content')
        var index = $(this).index()

        if ($(this).hasClass('active')) {
          return
        } else {
          $('#tabs li').removeClass('active')
          $(this).addClass('active')

          tabContent.hide().eq(index).fadeIn()
        }
      })
    })
  </script>
</body>
</html>
